window.onload=function(){
    navBar();
    lb();
    echart1();
    echart2();
    echart3();
}

/*
    导航条滑块效果
    author: 邓迪帆
*/
function navBar(){
    var navItems = document.getElementsByClassName("nav_items");
    var LnavItems = Array.from(navItems);
    let active;
    LnavItems.forEach(function(e){
        e.addEventListener('click', showBar);
        e.addEventListener('mouseover', showBar);
        function showBar(){
            if(active != undefined){
                active.classList.remove("active");
            }
            e.classList.add("active");
            active = e;
        }
    })
}

/*
    轮播图效果
    author: 邓迪帆
*/
function lb(){
    var box = document.getElementsByClassName("box")[0];
    var left = document.getElementsByClassName("left")[0];
    var right = document.getElementsByClassName("right")[0];
    var img = document.getElementsByClassName("img")[0];
    var circle = document.getElementsByClassName('circle')[0];
    var width = box.offsetWidth;
    var index = 0;

    // 自动播放
    var timer = setInterval(()=>{
        right.click();
    },2000)

    // 轮播图小圆点展示及其点击事件
    for(var i = 0; i < img.children.length; i++){
        var li = document.createElement('li');
        li.setAttribute('index', i);
        circle.appendChild(li);
        li.addEventListener('click',function(){
            circle.children[index].classList.remove('current');
            index = this.getAttribute('index');
            this.classList.add('current');
            img.style.left = -index * width + 'px';
        })
    }
    if(circle.children.length > 0){
        circle.children[index].classList.add('current');
    }

    // 鼠标进入停止自动播放
    box.addEventListener("mouseenter", ()=>{
        left.style.display = "block";
        right.style.display = "block";
        if(timer != undefined){
            clearInterval(timer);
        }
    })
    box.addEventListener("mouseleave", ()=>{
        left.style.display = "none";
        right.style.display = "none";
        timer = setInterval(()=>{
            right.click();
        },2000)
    })

    // 右箭头切换图片
    right.addEventListener("click",()=>{
        circle.children[index].classList.remove('current');
        if(index == img.children.length-1){
            index = 0;
        }else{
            index++;
        }
        circle.children[index].classList.add('current');
        img.style.left = -index * width + 'px';
    })
    
    // 左箭头切换图片
    left.addEventListener("click",()=>{
        if(index == 0){
            index = img.children.length-1;
        }else{
            index--;  
        }
        img.style.left = -index * width + 'px';
    })
}

/*
    曲线图
    author: 邓迪帆
*/
function echart1(){
    var myChart = echarts.init(document.getElementById("echart1"));
    var xhr1 = new XMLHttpRequest();
    var xAxis, series;
    xhr1.open("GET", "https://edu.telking.com/api?type=month", true);
    xhr1.onreadystatechange = function(){
        if(xhr1.status == 200 && xhr1.readyState == 4){
            var resp = JSON.parse(xhr1.response);
            console.log(resp);
            xAxis = resp["data"]["xAxis"];
            series = resp["data"]["series"];
            var option = {
                title: {
                    text: '曲线图数据展示',
                    x: 'center',
                    y: '20px',
                },
                xAxis: {
                    value: 'time',
                    data: xAxis,
                    axisLine: { lineStyle: { color: '#0' } }, 
                    splitLine: { lineStyle: { color: '#0', type: 'dashed' } }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value}人'
                    }
                },
                grid: {
                    containLabel: true,
                    left: '3%',
                    right: '4%',
                    bottom: '6%'
                },
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        data: series,
                        label: {
                            show: true 
                        },
                        areaStyle: {
                            color: '#f3f7fe',
                            opacity: 0.9
                        },
                        itemStyle: {
                            color: '#4587f0'
                        }
                    }
                ],
                 
            }
            myChart.setOption(option);
        }
    };
    xhr1.send();
    
}

/*
    饼状图
    author: 邓迪帆
*/
function echart2(){
    var myChart = echarts.init(document.getElementById("echart2"));
    var option = {
        title: {
            text: '饼状图数据展示',
            x: 'center',
            y: '20px',
        },
        grid: {
            containLabel: true,
            height: '250px',
            width: '460px',
        },
        tooltip: {
            trigger: 'item',
            formatter:function(param){
                return param.marker + " " + param.name +" "+ param.value + "(" + param.percent + "%)";
            }
        },
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 10,
                        name: 'Mon'
                    },
                    {
                        value: 10,
                        name: 'Tue'
                    },
                    {
                        value: 8,
                        name: 'Wed'
                    },
                    {
                        value: 4,
                        name: 'Thu'
                    },
                    {
                        value: 28,
                        name: 'Fri'
                    },
                    {
                        value: 20,
                        name: 'Sat'
                    },
                    {
                        value: 20,
                        name: 'Sun'
                    }
                ],
                radius: '65%',
                label: {
                    show: true
                },
            }
        ]
    }
    myChart.setOption(option);
}

/*
    柱状图
    author: 邓迪帆
*/
function echart3(){
    var myChart = echarts.init(document.getElementById("echart3"));
    var option = {
        title: {
            text: '柱状图数据展示',
            x: 'center',
            y: '20px',
        },
        xAxis: {
            data: ['MON','TUE','WED','THU','FRI','SAT','SUN'],
            axisLine: { lineStyle: { color: '#0' } }, 
            splitLine: { lineStyle: { color: '#0' } }
        },
        yAxis: {
            type: 'value',
            name: '商品数',
        },
        grid: {
            height: '250px',
            width: '460px',
            bottom: '15%'
        },
        tooltip: {
            trigger: 'axis',
        },
        series: [
            {
                type: 'bar',
                barWidth: 25,
                data: [9,11,13,10,8,11,5],
                itemStyle: {
                    color: '#4587f0'
                }
            }
        ],
         
    }
    myChart.setOption(option);
}